<style type="text/css">
    .header-box {
        height: 1.085rem;
        background-color: red;
    }
    #map {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
        position: absolute;
        z-index: 0;
    }
    .detail-panel {
        position: fixed;
        z-index: 1;
        background-color: transparent;
        bottom: 0.3rem;
        width: 100%;
    }
    .panel {
        background-color: whitesmoke;
        width: 85%;
        color: black;
        border-radius: 0.3rem;
    }
    .address-name {
        margin-top: 0.3rem;
        margin-left: 0.1rem;
        margin-bottom: 0.6rem;
        font-size: 0.4rem;

    }
    .address-name span {
        margin-left: 0.2rem;
        font-weight: bold;

    }
    .clearfix::after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .btn-close {
        background-color: transparent;
        width: fit-content;
        float: right;
        padding: 0.2rem;
        border-width: 0rem;
    }
    .address-detail {
        margin-bottom: 0.1rem;
        font-size: 0.3rem;
    }
    
    .divideline {
        width: 1px;
        height: auto;
        background: rgb(97, 95, 95);
        margin-top: 0.1rem;
        margin-bottom: 0.1rem;
        margin-left: 0.2rem;
    }
</style>

<div class="bui-page bui-box-vertical">
    <header>
       <div class="bui-bar header-box" style="height: 1.085rem;
       background-color: red;">
        <div class="bui-bar-left">
            <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
        </div>
        <div class="bui-bar-main"></div>
        <div class="bui-bar-right">
            <!-- 右边按钮 -->
        </div>
       </div>
    </header>
    <main>
        <div id="map"></div>
        <div class="detail-panel bui-box bui-box-center">
            <div class="panel">
                
                <!-- <div class="clearfix">
                    
                </div>
                 -->
                <div class="bui-btn btn-close">
                    <i class="icon-close"></i>
                </div>
                <div class="bui-box address-name bui-box-align-middle">
                    <i class="icon-pos">
                        <img src="images/addressmap/build.png" style="width: 0.6rem;">
                    </i>
                    <span id="adname"></span>
                    
                </div>
                    
               
               
                <div class="address-detail bui-box">
                    <div class="address-road" style="width: 50%">
                        <i class="icon-pos">
                            <img src="images/addressmap/loc.png" style="width: 0.4rem;">
                        </i>
                        <span id="adroad"></span>
                    </div>
                    <!-- <div>|</div> -->
                    <div class="divideline"></div>
                    <div class="address-length span1">
                        <i class="icon-dis">
                            <img src="images/addressmap/dis.png" style="width: 0.4rem;">
                        </i>
                        <span id="addis"></span>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
</div>